<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
	<head>
		<!-- 必须的 meta 标签 -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<!-- 导入bootstrap5的框架样式文件 -->
		<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="static/bs-icons/bootstrap-icons.css" />
	</head>
	<body>
		<div id="app" class="container-fluid">
			<h2 class="text-center my-4">商品信息数据列表</h2>
			<div class="m-2">
				<div>
					<form id="searchForm" th:action="@{/products}" th:object="${session.pageVO.searchVO}" class="row g-2">
						<div class="col-auto">
							<input type="text" name="gname" th:value="*{gname}" placeholder="名称 | 模糊查找" class="form-control" id="gname">
						</div>
						<div class="col-auto">
							<input type="text" name="gprice" th:value="*{gprice}" placeholder="单价 | 小于等于" class="form-control" id="gprice">
						</div>
						<div class="col-auto d-flex align-items-center">
							<label for="maintainDate" class="w-50" style="text-align: center;">保值日期</label>
							<input type="date" name="maintainDate" th:value="*{maintainDate}" class="form-control" id="maintainDate">
						</div>
						<div class="col-auto">
							<input type="text" name="classify" th:value="*{classify}" placeholder="分类 | 模糊查询" class="form-control" id="classify">
						</div>
						<div class="col-auto">
							<button type="submit" class="btn btn-primary">
								<i class="bi bi-search"></i>
								查询
							</button>
							<button type="button" onclick="clearForm()" class="btn btn-outline-primary">
								<i class="bi bi-eraser"></i>
								清空
							</button>
						</div>
					</form>
					<div class="my-2">
						<button class='btn btn-warning'>
							<i class="bi bi-trash"></i>
							批量删除
						</button>
						<button type="button" class='btn btn-success' data-bs-whatever="添加商品"
								data-bs-toggle="modal" data-bs-target="#addModal">
							<i class="bi bi-plus-lg"></i>
							添加
						</button>
					</div>
				</div>
				<table class="table table-bordered table-hover">
					<thead>
						<tr class="info">
							<th><input type="checkbox" /></th>
							<th>序号</th>
							<th>商品名称</th>
							<th>图片</th>
							<th>单价</th>
							<th>库存</th>
							<th>保值日期</th>
							<th>分类</th>
							<th>描述</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tataBody">
						<tr th:each="goods : ${session?.pageVO?.dataList}">
							<td><input type="checkbox"></td>
							<td th:text="${goods.gid}"></td>
							<td th:text="${goods.gname}"></td>
							<td>
								<img th:src="${goods.gimg}" height="50px" />
							</td>
							<td th:text="${goods.gprice}"></td>
							<td th:text="${goods.gstock}"></td>
							<td th:text="${#dates.format(goods.maintaindate,'yyyy-MM-dd')}"></td>
							<td th:text="${goods.classify}"></td>
							<td th:text="${goods.gdescribe}"></td>
							<td>
								<button type="button" class="btn btn-primary btn-sm" data-bs-whatever="修改商品"
										data-bs-toggle="modal" data-bs-target="#addModal" >
									<i class="bi bi-pencil-fill"></i>
									修改
								</button>
								<button type="button" th:onclick="deleteGoods([[${goods.gid}]])" class="btn btn-danger btn-sm">
									<i class="bi bi-trash-fill"></i>
									删除
								</button>
							</td>

						</tr>
					</tbody>
				</table>
				<!--删除用的form表单-->
				<form id="delForm" method="post" >
					<input type="hidden" name="_method" value="DELETE">
				</form>
				<!-- 分页 -->
				<nav class="row g-2" aria-label="Page navigation example">
					<ul class="pagination col-auto">
						<li th:class="|page-item ${session.pageVO.isFirstPage?'disabled':''}|">
							<span class="page-link" th:onclick="prePageBtn()" aria-label="Previous">
								<span aria-hidden="true">&laquo;</span>
							</span>
						</li>
						<li th:each="p:${#numbers.sequence(1,session.pageVO.pageNum)}"
							th:class="|page-item ${session.pageVO.currentPage == p?'active':''}|">
							<span class="page-link" th:onclick="pageBtn([[${p}]])" th:text="${p}"></span>
						</li>
						<li th:class="|page-item ${session.pageVO.isLastPage?'disabled':''}|">
							<span class="page-link" th:onclick="nextPageBtn()" aria-label="Next">
								<span aria-hidden="true">&raquo;</span>
							</span>
						</li>
					</ul>
					<label th:object="${session.pageVO}" class="col-auto" style="font-size: 25px;">
						共[[*{pageNum}]]页 [[*{total}]]条
					</label>
				</nav>
			</div>

			<!--添加信息的模态窗口
				手动关闭模态框的代码：
				var myModalEl = document.getElementById('myModal')
				bootstrap.Modal.getInstance(myModalEl).hide()
			-->
			<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="addModalLabel">添加商品</h5>
							<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						</div>
						<div class="modal-body mx-4">
							<form th:action="@{/product}" method="post" enctype="multipart/form-data" class="addForm row g-2" id="addForm">
								<div class="gidDiv">
									<div style="width: 240px;">

									</div>
								</div>
								<div class="col-auto">
									<div style="width: 240px;">
										<input type="text" name="gname" id="upGname" class="form-control" placeholder="请输入商品名称" required />
									</div>
								</div>
								<div class="col-auto">
									<label class="control-label">商品图片</label>
									<div style="width: 240px;">
										<input type="file" name="gimg" class="form-control" />
									</div>
								</div>
								<div class="col-auto">
									<div style="width: 240px;">
										<input type="number" name="gprice" id="upGprice" class="form-control" placeholder="商品单价" required />
									</div>
								</div>
								<div class="col-auto">
									<div style="width: 240px;">
										<input type="number" name="gstock" id="upGstock" class="form-control" placeholder="库存" required />
									</div>
								</div>
								<div class="col-auto">
									<label class="control-label">保值日期</label>
									<div style="width: 240px;">
										<input type="date" name="maintaindate" id="upDate" class="form-control" required />
									</div>
								</div>
								<div class="col-auto">
									<div style="width: 240px;">
										<select class="form-control" id="upClassify" name="classify">
											<option value="">----请选择商品分类----</option>
											<option value="数码电器">数码电器</option>
											<option value="手机">手机</option>
											<option value="电脑">电脑</option>
											<option value="箱包皮具">箱包皮具</option>
										</select>
									</div>
								</div>
								<div class="">
									<textarea class="form-control" id="upGdescribe" name="gdescribe" placeholder="商品描述"></textarea>
								</div>
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-outline-info" data-bs-dismiss="modal">取消</button>
							<!--因为当前button提交按钮在form标签外部，需要使用form属性对form标签进行关联-->
							<button type="submit" form="addForm" class="btn btn-primary">确认添加</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="static/js/bootstrap.bundle.min.js"></script>
		<script th:src="@{/static/js/jquery-1.12.4.min.js}"></script>

		<script type="text/javascript" >

			// 操作模态框，当前一个模态框应用新增和修改两种业务场景
			$(function () {
				// 获取模态框，官方代码
				var exampleModal = document.getElementById('addModal')
				exampleModal.addEventListener('show.bs.modal', function (event) {
					// 获取按钮对象
					const button = event.relatedTarget
					// 获取自定义属性设置的数据（点击按钮绑定的用来区分当前是添加还是修改的标识）
					const modelTitle = button.getAttribute('data-bs-whatever')
					// 直接将获取的标识数据作为模态框标题
					$('#addModalLabel').text(modelTitle)

					// 1. 如果是添加商品，需要移除隐藏域标签和记录gid的只读input标签
					if (modelTitle === "添加商品") {
						if ($("#hidden").length > 0) {
							// 删除隐藏域标签
							$("#hidden").remove()
						}
						// 移除记录gid的只读标签，因为添加时不需要gid
						$("#upGidT").remove()
						// 清空数据
						$("#upGname").val('')
						$("#upGprice").val('')
						$("#upGstock").val('')
						$("#upDate").val('')
						$("#upClassify").val('')
						$("#upGdescribe").val('')
					}

					// 2. 如果时修改商品，需要添加记录gid的只读标签和标识restful风格put请求的隐藏域标签
					if (modelTitle === "修改商品") {
						if ($("#hidden").length === 0) {
							// 添加隐藏域标签，有这个标签，再配合后端的隐藏域过滤器，
							// 才可以使用restful风格的put和delete请求
							$('#addForm').append(`<input id='hidden' type='hidden' name='_method' value='PUT'/>`)
						}
						if ($('#upGidT').length === 0){
							// 添加gid的只读标签
							$('#addForm .gidDiv').append(`<input type='text' class='form-control'
												name='gid' id='upGidT' readonly />`)
						}
						// 回显数据
						let tds = $(button).parent().siblings()
						$("#upGidT").val(tds.eq(1).text())
						$("#upGname").val(tds.eq(2).text())
						$("#upGprice").val(tds.eq(4).text())
						$("#upGstock").val(tds.eq(5).text())
						$("#upDate").val(tds.eq(6).text().substring(0, 10))
						$("#upClassify").val(tds.eq(7).text())
						$("#upGdescribe").val(tds.eq(8).text())
					}
				})
			})

			// 删除
			function deleteGoods(gid){
				if (confirm("确定要删除id为"+gid+"的商品吗?")) {
					// 拼接要删除的url地址
					//let delUrl = "product/"+gid;
					// 使用ES6语法的模板字符串
					let delUrl = `product/${gid}`;
					// 给删除表单绑定action地址
					$('#delForm').attr("action", delUrl)
					// 提交表单
					$('#delForm').submit()
				}
			}

			// 清空表单的事件方法
			function clearForm(){
				// 定位到新的资源，发一个请求 GET
				location.href = "[[@{/products?page=1}]]";
			}

			// 上一页
			function prePageBtn(){
				// 将当前页-1
				let currentPage = [[${session.pageVO.currentPage}]] - 1;
				if (currentPage > 0){
					pageBtn(currentPage);
				}
			}

			// 分页按钮事件
			function pageBtn(page){
				// 获取查询表单的说有数据
				let formData = $("#searchForm").serialize();
				console.log(formData);
				location.href = "[[@{/products?}]]" + formData + "&page="+page;
			}

			// 下一页
			function nextPageBtn(){
				let currentPage = [[${session.pageVO.currentPage}]];
				let pageNum = [[${session.pageVO.pageNum}]];
				if (currentPage < pageNum ){
					pageBtn(currentPage+1);
				}
			}
		</script>

	</body>
</html>
